<template>
  <view class="container">
    <!-- 1. 图片选择+预览功能区 -->
    <view class="image-section">
      <button class="choose-btn" @click="chooseImage">选择本机图片</button>
      <button 
        class="preview-btn" 
        @click="previewImage" 
        v-if="imagePath"
      >
        预览选中的图片
      </button>
      <view class="image-box" v-if="imagePath">
        <text class="title">已选择的图片：</text>
        <image :src="imagePath" class="show-image" mode="widthFix"></image>
      </view>
    </view>

    <!-- 2. 天气预报功能区 -->
    <view class="weather-section">
      <button class="weather-btn" @click="getWeather">获取明天的天气预报</button>
      <view class="weather-info" v-if="tomorrowWeather">
        <text class="weather-title">明天的天气预报：</text>
        <view class="weather-item">日期：{{ tomorrowWeather.date }}</view>
        <view class="weather-item">星期：{{ tomorrowWeather.week }}</view>
        <view class="weather-item">最高温：{{ tomorrowWeather.maxTemp }}℃</view>
        <view class="weather-item">最低温：{{ tomorrowWeather.minTemp }}℃</view>
      </view>
    </view>

    <!-- 3. 网络图片下载功能区 -->
    <view class="download-section">
      <button class="download-btn" @click="downloadNetImage">下载网络图片</button>
      <!-- 下载进度显示 -->
      <view class="progress-text" v-if="downloadProgress > 0">
        下载进度：{{ downloadProgress }}%
      </view>
      <!-- 下载后的图片显示 -->
      <view class="image-box" v-if="downloadedImagePath">
        <text class="title">已下载的网络图片：</text>
        <image :src="downloadedImagePath" class="show-image" mode="widthFix"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

// ========== 图片选择+预览相关 ==========
const imagePath = ref('');
const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      imagePath.value = res.tempFilePaths[0];
      uni.showToast({ title: '选择图片成功', icon: 'success' });
    },
    fail: () => {
      uni.showToast({ title: '选择图片失败', icon: 'error' });
    }
  });
};
const previewImage = () => {
  uni.previewImage({
    urls: [imagePath.value],
    current: 0,
    success: () => { console.log('预览成功') }
  });
};

// ========== 天气预报相关 ==========
const tomorrowWeather = ref(null);
const getWeather = () => {
  const weatherUrl = "http://t.weather.sojson.com/api/weather/city/101230501";
  uni.request({
    url: weatherUrl,
    method: 'GET',
    success: (res) => {
      const forecastList = res.data.data.forecast;
      if (forecastList && forecastList.length >= 2) {
        const tomorrow = forecastList[1];
        tomorrowWeather.value = {
          date: tomorrow.date,
          week: tomorrow.week,
          maxTemp: tomorrow.high.replace('高温 ', ''),
          minTemp: tomorrow.low.replace('低温 ', '')
        };
        uni.showToast({ title: '获取天气成功', icon: 'success' });
      } else {
        uni.showToast({ title: '未获取到明天天气', icon: 'error' });
      }
    },
    fail: () => {
      uni.showToast({ title: '请求天气接口失败', icon: 'error' });
    }
  });
};

// ========== 网络图片下载相关 ==========
const downloadProgress = ref(0); 
const downloadedImagePath = ref(''); 
const downloadNetImage = () => {
  const imageUrl = "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg";
  // 调用uniapp下载文件接口
  uni.downloadFile({
    url: imageUrl,
    // 监听下载进度
    onProgressUpdate: (res) => {
      downloadProgress.value = res.progress;
      console.log(`下载进度：${res.progress}%，已下载：${res.totalBytesWritten}字节，总大小：${res.totalBytesExpectedToWrite}字节`);
    },
    success: (res) => {
      if (res.statusCode === 200) {
        downloadedImagePath.value = res.tempFilePath; // 临时文件路径
        downloadProgress.value = 0; // 重置进度
        uni.showToast({ title: '图片下载完成', icon: 'success' });
      }
    },
    fail: () => {
      downloadProgress.value = 0;
      uni.showToast({ title: '图片下载失败', icon: 'error' });
    }
  });
};
</script>

<style scoped>
.container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

/* 图片选择功能样式 */
.image-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.choose-btn {
  background-color: #4cd964;
  color: #fff;
  padding: 15rpx 0;
  border-radius: 8rpx;
}
.preview-btn {
  background-color: #007aff;
  color: #fff;
  padding: 15rpx 0;
  border-radius: 8rpx;
}
.image-box {
  margin-top: 20rpx;
}
.title {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 10rpx;
}
.show-image {
  width: 100%;
  max-height: 500rpx;
  border-radius: 8rpx;
}

/* 天气预报样式 */
.weather-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.weather-btn {
  background-color: #ff9500;
  color: #fff;
  padding: 15rpx 0;
  border-radius: 8rpx;
}
.weather-info {
  background-color: #f5f5f5;
  padding: 20rpx;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}
.weather-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}
.weather-item {
  font-size: 26rpx;
  color: #666;
}

/* 网络图片下载样式 */
.download-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}
.download-btn {
  background-color: #5856d6;
  color: #fff;
  padding: 15rpx 0;
  border-radius: 8rpx;
}
.progress-text {
  font-size: 26rpx;
  color: #007aff;
}
</style>